<template>
  <!-- 导入数据任务分配 -->
  <div :class="$style.filtterOrder">
    <FormContainer :column="4">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="customerName" label="客户姓名">
          <el-input v-model="formData.customerName" placeholder="请输入客户姓名" clearable />
        </el-form-item>
        <el-form-item prop="customerPhone" label="联系电话">
          <el-input v-model="formData.customerPhone" placeholder="请输入联系电话" clearable />
        </el-form-item>
        <el-form-item prop="allocationState" label="分配状态">
          <el-select v-model="formData.allocationState" placeholder="请选择分配状态" clearable>
            <el-option label="未分配" :value="0" />
            <el-option label="已分配" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item prop="remarks1" label="备注信息1">
          <el-input v-model="formData.remarks1" placeholder="" />
        </el-form-item>
        <el-form-item prop="remarks2" label="备注信息2">
          <el-input v-model="formData.remarks2" placeholder="" />
        </el-form-item>
        <el-form-item prop="remarks3" label="备注信息3">
          <el-input v-model="formData.remarks3" placeholder="" />
        </el-form-item>
        <el-form-item prop="remarks4" label="备注信息4">
          <el-input v-model="formData.remarks4" placeholder="" />
        </el-form-item>
        <el-form-item prop="remarks5" label="备注信息5">
          <el-input v-model="formData.remarks5" placeholder="" />
        </el-form-item>
        <el-form-item>
          <Button @click="$refs.form.resetFields()">重置</Button>
          <Button type="primary" :loading="loading" enter @click="queryHandle">查询</Button>
        </el-form-item>
      </el-form>
    </FormContainer>
    <ManualTemplate :list="selectedAry" :object-method="0" @refresh="refreshTable('onPage')"></ManualTemplate>
    <table-box
      ref="table"
      no-request
      :selected-arry="selectedAry"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      @selection-change="selectionChange"
      @data-change="loading=false"
    >
      <el-table-column slot="before" type="selection" width="50" align="center"></el-table-column>
    </table-box>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import ManualTemplate from './ManualTemplate'
import { filtersRaw } from '@/utils'
import { mapState } from 'vuex'
export default {
  name: 'FiltterOrder',
  components: {
    FormContainer,
    Button,
    ManualTemplate
  },
  data() {
    return {
      loading: false,
      tempData: {
        seatsName: ''
      },
      otherFilters: [],
      formData: {
        agency: '',
        agent: '',
        shop: '',
        status: '',
        customerName: '',
        customerPhone: ''
      },
      formRules: {},
      tableConfig: {
        interfacePath: '/call-center/api/v1/callBackTask/import/page',
        pageFlag: true,
        sort: 'createTime',
        order: 'desc',
        hideFuncBar: true,
        tablePage: [100, 500, 1000, 2500, 5000],
        pageSize: 100,
        // 表格字段动态配置
        setting: [
          {
            prop: 'customerName',
            label: '客户姓名'
          },
          {
            prop: 'customerPhone',
            label: '联系电话'
          },
          {
            prop: 'remarks1',
            label: '备注信息1'
          },
          {
            prop: 'remarks2',
            label: '备注信息2'
          },
          {
            prop: 'remarks3',
            label: '备注信息3'
          },
          {
            prop: 'remarks4',
            label: '备注信息4'
          },
          {
            prop: 'remarks5',
            label: '备注信息5'
          },
          {
            prop: 'allocationState',
            label: '分配状态',
            formatData: val => {
              return val.allocationState === 1 ? '已分配' : '未分配'
            }
          },
          {
            prop: 'customerServiceName',
            label: '执行坐席',
            formatData: v => {
              if (v.customerService) {
                return `${v.customerServiceName}(${v.customerService})`
              } else {
                return ''
              }
            }
          }
        ]

      },
      selectedAry: [],
      addData: {
        visitPeople: ''
      }
    }
  },
  computed: {
    ...mapState({
      taskId: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].basic.id : ''
      },
      step: function(state) {
        return state.taskForm.form[this.$route.query.id] ? state.taskForm.form[this.$route.query.id].step : 1
      }
    })
  },
  methods: {
    // 查询
    queryHandle() {
      const list = []
      this.formData.taskId = this.taskId
      for (const i in this.formData) {
        if (this.formData[i] || this.formData[i] === 0) {
          if (i === 'taskId' || i === 'customerPhone' || i === 'allocationState') {
            list.push(filtersRaw(i, this.formData[i], '='))
          } else {
            list.push(filtersRaw(i, this.formData[i], 'like'))
          }
        }
      }
      this.otherFilters = list
      this.$nextTick(() => {
        this.refreshTable('opCondition')
      })
    },
    // 刷新表格
    refreshTable(type) {
      this.$refs.table.initTableData(type)
    },
    // 表格选中事件
    selectionChange(val) {
      this.selectedAry = val
    }
  }
}
</script>
<style lang='scss' module>
.filtterOrder{
  & tr{
    background-color: white !important;
  }
}
</style>
